<template>
	<view class="custom-box">
		<map :controls="controls" :show-location="showLocation" :show-compass="showCompass" :scale="scale" :latitude="latitude"
		 :longitude="longitude"  :enable-scroll="false" :enable-traffic="true"></map>
		<view class="mian-box flex-col flex-al ">
			<image class="top-img" src="../../../static/imgs/from-top.png"></image>
			<view class="choose-bg flex-col flex-al flex-jc">
				<view class="start flex-row flex-al w100" @click="chooseStart">
					<view class="point"></view>
					<view :class="start?'title':'title no-choose'">{{!start?'在地图上选择起点':(start.name?start.name:start.address)}}</view>
				</view>
				<view class="line flex-row flex-al w100">
					<view class="point-3 flex-col flex-al">
						<view></view>
						<view></view>
						<view></view>
					</view>
					<view class="line-mian"></view>
					<image src="../../../static/imgs/change-way.png" @click="changeDirection"></image>
				</view>
				<view class="end flex-row flex-al w100" @click="chooseEnd">
					<view class="point"></view>
					<view :class="end?'title':'title no-choose'">{{!end?'在地图上选择终点':(end.name?end.name:end.address)}}</view>
				</view>
			</view>
			<view class="btn" hover-class="btn-hover" @click="runFromCatch">
				立即发起定制
			</view>
			<uni-popup ref="popup0" type="bottom">
				<view class="pop-bg flex-col flex-al">
					<view class="pop-title flex-row flex-al flex-sb">
						<view @click="popupCloseAll">取消</view>
						<view>您的姓名？</view>
						<view @click="popup1Show">下一步</view>
					</view>
					<view class="yongtu flex-row flex-al">
						<input class="w100"  type="text" maxlength="16" placeholder="您的姓名" v-model="name">
					</view>
					<view class="yongtu flex-row flex-al">
						<input class="w100" type="number" maxlength="11" placeholder="您的电话" v-model="phone">
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup1" type="bottom" :mask="false">
				<view class="pop-bg flex-col flex-al">
					<view class="pop-title flex-row flex-al flex-sb">
						<view @click="popupCloseAll">取消</view>
						<view>您的乘车时间是？</view>
						<view @click="popup2Show">下一步</view>
					</view>
					<view class="yongtu">
						<picker value="" name="choosetime1" @change="timeChange" mode="time">
							<view>
								{{time?time:'请选择乘车时间'}}
							</view>
						</picker>
					</view>
					<view class="yongtu">
						<picker value="" name="choosetime2" @change="dateChange" mode="date">
							<view>
								{{date?date:'请选择乘车日期'}}
							</view>
						</picker>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup2" type="bottom" :mask="false">
				<view class="pop-bg flex-col flex-al">
					<view class="pop-title flex-row flex-al flex-sb">
						<view @click="popupCloseAll">取消</view>
						<view>您的乘车人数是？</view>
						<view @click="popup3Show">下一步</view>
					</view>
					<view class="yongtu flex-row flex-al">
						<input class="w100" type="number" maxlength="3" placeholder="输入乘车人数" v-model="count">
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup3" type="bottom" :mask="false">
				<view class="pop-bg flex-col flex-al">
					<view class="pop-title flex-row flex-al flex-sb">
						<view @click="popupCloseAll">取消</view>
						<view>您定制公交用途是？</view>
						<view></view>
					</view>
					<view class="yongtu" @click="final('个人预约用车')">
						个人预约用车
					</view>
					<view class="yongtu" @click="final('企事业单位通勤用车')">
						企事业单位通勤用车
					</view>
					<view class="yongtu" @click="final('学校通勤用车')">
						学校通勤用车
					</view>
					<view class="yongtu" @click="final('旅游活动用车')">
						旅游活动用车
					</view>
					<view class="yongtu" @click="final('商务活动用车')">
						商务活动用车
					</view>
					<view class="yongtu" @click="final('物流用车')">
						物流用车
					</view>
					<view class="yongtu" @click="final('其它')">
						其它
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="alert1" type="center" :maskClick="false" :mask="true">
				<view class="alert-box flex-col flex-al" @click="closeAlert">
					<text>{{alertTitle}}</text>
					<text>{{alertContent}}</text>
					<text>确定</text>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import HttpModule from "../../../module/httpModule.js"
	const httpModule = new HttpModule();
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		data() {
			return {

				alertTitle: '提示',
				alertContent: '请选择起点和终点',
				choosed: null, //当选选择的地图信息
				start: null, //默认起点，可切换
				end: null,
				popIsShow: false,
				chooseNow: 0, //0点击起点 1点击终点
				scale: 18,
				showLocation: true,
				showCompass: true,
				latitude: null,
				longitude: null,
				controls: [], //控件
				name: '', //姓名
				phone: '', //手机号
				time: '点击选择时间',
				date: '点击选择日期',
				yongtu: '', //用途
				count: null

			};
		},
		components: {
			uniPopup
		},
		async onShow(){
			this.popupCloseAll();
			
		},
		async onLoad() {
			await httpModule.authToken();
			const userInfo =uni.getStorageSync('userInfo')
			if(userInfo){
				this.name=userInfo.username
				this.phone=userInfo.phone
			}
			const width = httpModule.width
			const height = httpModule.height;
			const local = await httpModule.getlocal();
			// latitude: 32.10105
			// longitude: 114.12561
			console.log(local)
			this.latitude = local.latitude
			this.longitude = local.longitude
			this.controls = [{
					id: 'top',
					position: {
						left: 0,
						top: 0,
						width: width
					},
					iconPath: "/static/imgs/map-top.png"
				},
				{
					id: 'map',
					position: {
						left: 159 * (width / 375),
						top: (height - (637 / 2) * (width / 375)) / 2 - (width / 6.25 * 1.25) / 2 - 11 * (width / 375),
						width: width / 6.25,
						height: width / 6.25 * 1.25
					},
					iconPath: "/static/imgs/map.png"
				}
			]
		},
		methods: {
			timeChange(e) {
				const value = e.detail.value;
				this.time = value
			
			},
			dateChange(e) {
				const value = e.detail.value;
				this.date = value
			
			},
			
			final(e) {
				this.yongtu = e;
				    // '${form.data.username}',
				    //      '${form.data.phone}',
				    //      '${form.data.stationup}',
				    //      '${form.data.stationdown}',
				    //      '${form.data.peoplenumber}',
				    //      '${form.data.choosetime}',
				    //      '${form.data.ordertime}',
				    //      '${form.data.ordernum}',
				    //      ${form.userId},
				    //      0,
				    //      '${form.data.beizhu}'
				let form={
					username:this.name,
					phone:this.phone,
					stationup:JSON.stringify(this.start),
					stationdown:JSON.stringify(this.end),
					peoplenumber:this.count,
					choosetime:this.date+' '+this.time,
					yongtu:this.yongtu
				}
				// pages/serve/customBus/confirm
				console.log(form)
				uni.navigateTo({
					url:`/pages/serve/customBus/confirm?username=${form.username}&phone=${form.phone}&stationup=${form.stationup}&stationdown=${form.stationdown}&peoplenumber=${form.peoplenumber}&choosetime=${form.choosetime}&yongtu=${form.yongtu}&`
				})
			},
			popup3Show() {
				if (!this.count) {
					this.showAlert({
						title: '提示',
						content: '请输入人数！'
					})
				} else {
					this.$refs.popup3.open()
				}
			},
			
			popup2Show() {
				if (this.time == '点击选择时间' || this.date == '点击选择日期') {
					this.showAlert({
						title: '提示',
						content: '请选择时间和日期！'
					})
				} else {
					this.$refs.popup2.open()
				}
			},
			popup1Show() {
				var _this=this;
				if (this.name && this.phone) {
					//加入缓存
					uni.setStorage({
						 key: 'userInfo',
						 data: {
							 username:_this.name,
							phone:_this.phone},
					})
					this.$refs.popup1.open()
				} else {
					this.showAlert({
						title: '提示',
						content: '请选择真实姓名和手机号！'
					})
				}
			},
			popup0Show() {
				this.$refs.popup0.open()
			},
			popup3Close() {
				this.$refs.popup3.close()
			},
			popup2Close() {
				this.$refs.popup2.close()
			},
			popup1Close() {
				this.$refs.popup1.close()
			},
			popup0Close() {
				this.$refs.popup0.close()
			},
			popupCloseAll(){
				this.$refs.popup0.close()
				this.$refs.popup1.close()
				this.$refs.popup2.close()
				this.$refs.popup3.close()
			},
			closeAlert() {
				this.$refs.alert1.close()
			},
			runFromCatch() {
				if (this.start && this.end) {
					this.popup0Show()
				} else {
					this.showAlert({
						title: '提示',
						content: '请选择起点和终点'
					})
				}

			},
			showAlert(params) {
				this.alertTitle = params.title
				this.alertContent = params.content
				this.$refs.alert1.open()
			},
			chooseStart() {
				this.chooseNow = 0;
				uni.chooseLocation({
					success: e => {
						this.changeInfo(e)
					}
				})
			},
			chooseEnd() {
				this.chooseNow = 1;
				uni.chooseLocation({
					success: e => {
						this.changeInfo(e)
					}
				})
			},
			changeDirection() {
				let bus;
				bus = this.end
				this.end = this.start
				this.start = bus;
			},
			changeInfo(choosed) {
				this.choosed = choosed;
				console.log(choosed)
				this.latitude = choosed.latitude
				this.longitude = choosed.longitude
				if (this.chooseNow) {
					//编辑的是终点
					this.end = choosed
				} else {
					this.start = choosed
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@w: 685rpx;

	.alert-box {
		width: 600rpx;
		background: #fff;
		border-radius: 15rpx;
		color: #444;
		box-sizing: border-box;
		padding: 50rpx 30rpx;

		text {
			&:first-child {
				font-size: 30rpx;
				font-weight: bold;
			}

			&:nth-child(2) {
				margin-top: 15rpx;
				color: #777;
				font-size: 28rpx;
			}

			&:last-child {
				margin-top: 50rpx;
				font-size: 30rpx;
				color: rgba(26, 184, 148, 1);
			}
		}
	}

	.pop-bg {
		width: 750rpx;
		min-height: 637rpx;
		background: rgba(255, 255, 255, 1);

		.yongtu {
			width: @w;
			height: 94rpx;
			background: rgba(238, 245, 243, 1);
			border-radius: 5rpx;
			margin-top: 17rpx;
			margin-bottom: 17rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #282828;
			text-align: center;
			line-height: 94rpx;

			input {
				width: @w;
				height: 100%;
				font-size: 28rpx;
				color: rgba(40, 40, 40, 255);
				text-align: center;
				line-height: 94rpx;
			}
		}

		.pop-title {
			width: @w;
			padding-top: 20rpx;
			view {
				&:nth-child(1),
				&:nth-child(3) {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: rgba(26, 184, 148, 1);
					width: 150rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
				}

				&:nth-child(2) {
					font-size: 32rpx;
					width: 500rpx;
					text-align: center;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: rgba(50, 50, 51, 1);
				}
			}
		}
	}

	.custom-box {
		background: #fff;

		map {
			width: 750rpx;
			height: calc(100vh - 637rpx);
		}

		.mian-box {
			width: 750rpx;
			height: 673rpx;
			background: rgba(255, 255, 255, 1);
			position: relative;

			.top-img {
				&:first-child {
					width: 537rpx;
					height: 202rpx;
					margin-top: 15px;
				}
			}

			.btn {
				width: @w;
				margin: 38rpx auto;
				height: 92rpx;
				background: rgba(26, 184, 148, 1);
				box-shadow: 0px 0rpx 22rpx 0rpx rgba(142, 242, 219, 1);
				border-radius: 10rpx;
				text-align: center;
				line-height: 92rpx;
				color: #fff;
				font-size: 30rpx;
				transition: all 200ms;
			}

			.btn-hover {
				transition: all 200ms;
				transform: scale(1.02);
			}

			.choose-bg {
				width: @w;
				// height:187rpx;
				box-sizing: border-box;
				padding: 15rpx 42rpx;
				background: rgba(245, 245, 245, 127);
				border-radius: 15rpx;
				margin-top: 15rpx;
			}

			.start,
			.end {
				.point {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					;
					background: rgba(10, 203, 109, 1);
					margin-right: 32rpx;
				}

				.title {
					max-width: 494rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 30rpx;
					color: rgba(34, 34, 34, 1);
					margin-right: 52rpx;
				}

				.no-choose {
					font-size: 30rpx;
					font-weight: normal;
					color: #6D6D6D;
				}

			}

			.start {
				margin: 27rpx auto;
				margin-bottom: 14rpx;
			}

			.end {
				margin: 27rpx auto;
				margin-top: 14rpx;

				.point {
					background: rgba(203, 10, 10, 0.83);
				}
			}

			.line {
				.line-mian {
					width: 490rpx;
					margin-right: 36rpx;
					height: 1px;
					background: #e1e1e1;
				}

				.point-3 {
					margin-left: 4rpx;
					margin-right: 36rpx;
					;

					view {
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						background: rgba(216, 219, 217, 1);

						&:nth-child(2) {
							margin: 14rpx 0;
						}
					}
				}

				image {
					width: 30rpx;
					height: 33rpx;
				}
			}


		}
	}
</style>
